<template>
 <div id="siwper">
  <div class="abs">
   <template>
    <a-carousel arrows autoplay easing>
     <div
      slot="prevArrow"
      class="custom-slick-arrow"
      style="left: 241px;zIndex: 1"
     >
      <a-icon type="left-circle" />
     </div>
     <div slot="nextArrow" class="custom-slick-arrow" style="right: 20px">
      <a-icon type="right-circle" />
     </div>
     <template v-for="item in list">
         <div :key="item.id">
             <img :src="item.s_photos[0].path" alt="">
         </div>
     </template>
    </a-carousel>
   </template>
   <div class="left">
    <ul>
        <template v-for="item in lie">
     <!-- <li>
      <span>电视</span> <em>></em>
      <div class="uu">
      <div class="lun">
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
            <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
        <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
            <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
        <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
            <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
              <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
            <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       <div class="abu">
        <img
         src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90"
         alt=""
        />
        <p>小米11</p>
       </div>
       
      </div>
      </div>
     </li> -->
     <li :key="item.id"><span>{{item.name}}</span> <em>></em>
     </li>
     <!-- <li><span>电视</span> <em>></em></li>
     <li><span>电视</span> <em>></em></li>
     <li><span>电视</span> <em>></em></li>
     <li><span>电视</span> <em>></em></li>
     <li><span>电视</span> <em>></em></li>
     <li><span>电视</span> <em>></em></li>
     <li><span>电视</span> <em>></em></li>
     <li><span>电视</span> <em>></em></li> -->
        </template>
    </ul>
   </div>
   <div class="right"></div>
  </div>
 </div>
</template>

<script>
export default {
    data:()=>{
        return {
            list:[],
            lie:[]
        }
    },
      mounted(){
      this._axios.get("/api/carousel?site_id=1&project_id=38").then((res)=>{
      this.list=res.data.result.rows
  });
 
  

   this._axios.get('/api/classify?project_id=38').then((res)=>{
    this.lie=res.data.result
   })
    
}
};
</script>

<style lang="scss" scoped>
#siwper {
 .abs {
  position: relative;
  width: 1226px;
  margin: 0 auto;
  height: 460px;
  .ant-carousel .slick-prev::before {
    content: none;
}
.ant-carousel .slick-next::before {
    content: none;
}
  .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 29px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
  &:hover{
      color: #000;
      font-size: 35px;
  }
}
  img {
   width: 100%;
  }
  a-icon {
   display: block;
  }
  .left {
   position: absolute;
   top: 0;
   left: 0;
   background: rgba(105, 101, 101, 0.6);
   width: 234px;
   height: 460px;
   box-sizing: border-box;
   ul {
    height: 460px;
    padding: 20px 0;
    position: relative;
    li {
     //  width: 204px;
     height: 42px;
     line-height: 42px;
     cursor: pointer;
     span{
         margin-left: 20px;
     }
     em{
         font-size: 18px;
         color: #fff;
         float: right;
         margin-right: 50px;
     }
     &:hover{
         background-color: #ff6700;
         display: block;
     }
      &:hover .uu{
         background-color: #ff6700;
         display: block;
     }
    .uu{
        display: none;
         .lun {
      position: absolute;
      top: 0px;
      left: 204px;
      width: 1022px;
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      .abu {
       display: inline-block;
       width: 250px;
       margin: 9.5px 0;
       &:hover{
           color: #ff6700;
       }
       img {
        width: 50px;
        height: 50px;
       }
       p {
        display: inline-block;
       }
      }
     }
    }
    //  :nth-of-type(2) {
    //   float: right;
    //   margin-right: 20px;
    //  }
     span {
      color: #fff;
     }
    }
   }
  }
//   .right {
//   }
 }
}


</style>
